<template>
  <div>
    <el-table :data="bill" style="width: 100%;">
      <el-table-column prop="address" label="房间号"></el-table-column>
      <el-table-column prop="money" label="金额"></el-table-column>
      <el-table-column prop="createTime" label="账单生成时间"></el-table-column>
      <el-table-column prop="endTime" label="退房时间"></el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button :disabled="scope.row.endTime == null ? false :true" type="text" @click.once="cancelroom(scope.row)">退房</el-button>
      </template>
    </el-table-column>
    </el-table>
    <div class="pager">
           <el-pagination
        background
        layout="prev, pager, next,total"
        :total="total"
        :page-size="pageData.pageSize"
        @current-change="handlePage">
        </el-pagination>
        </div>
  </div>
</template>

<script>
import { userBillPage,celRoom } from '@/api/bill'
export default {
name:'',
components: {  },
data() {
    return {
      pageData:{
        page:1,
        pageSize:12,
      },
      bill:[],
      total:0,
    }
},
methods:{
  cancelroom(row){
    celRoom(row).then(res =>{
        let {data,msg,code} = res.data
        if(code ===1){
            this.$message.success(data)
            this.getList()
        }else{
            this.$message.error(msg)
        }
    })   
  },
  getList(){
    let userId =localStorage.getItem('tokenUser')
    userBillPage({params:{...this.pageData,userId}}).then(res =>{
      console.log('很要命-------',);
      let {data,code,msg} = res.data
      if(code === 1){
        this.bill = data.records
        this.total = Number(data.total)
      }else{
        this.$message.error(msg)
      }
    }).catch(err =>{
      this.$message.error('后端服务器异常',err)
    })
  },
  handlePage(val){
    this.pageData.page = val
    this.getList()
  },
},
mounted(){
    this.getList()
}
}
</script>

<style lang="less" scoped>

.pager{
    position: absolute;
    bottom: 30px;
    // right: 20px;
    left: 50%;
  }
</style>